<template>
  <div>
    <!--   collapsable 折叠效果 -->
    <vue2-org-tree v-drag ref="imageDom" name="test" :data="dataList" :horizontal="horizontal"
      :collapsable="false" :label-class-name="labelClassName" :render-content="renderContent"
      @on-expand="onExpand" @on-node-click="onNodeClick" />
  </div>
</template>
<script>
export default {
  components: {},
  props: ['horizontal', 'dataList'],
  data() {
    return {
      // 是否全部展开
      expandAll: true,
      // 背景色
      labelClassName: 'bg-none',
      url: process.env.VUE_APP_BASE_API,
    };
  },
  computed: {},
  // 开启拖拽的指令
  // directives: {
  //   drag: {
  //     // 指令的定义
  //     bind: function (el) {
  //       const odiv = el // 获取当前元素
  //       odiv.onmousedown = (e) => {
  //         // 算出鼠标相对元素的位置
  //         const disX = e.clientX - odiv.offsetLeft
  //         const disY = e.clientY - odiv.offsetTop

  //         document.onmousemove = (e) => {
  //           // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
  //           const left = e.clientX - disX
  //           const top = e.clientY - disY
  //           // 移动当前元素
  //           odiv.style.left = left + 'px'
  //           odiv.style.top = top + 'px'
  //         }
  //         document.onmouseup = (e) => {
  //           document.onmousemove = null
  //           document.onmouseup = null
  //         }
  //       }
  //     }
  //   }
  // },
  async created() {},
  async mounted() {
    this.initOrg();
  },
  methods: {
    // 组件的初始化默认展开三级
    initOrg() {
      this.$set(this.dataList, 'expand', true);
      if (this.dataList.children) {
        this.dataList.children.forEach((item, index) => {
          this.$set(item, 'expand', true);
        });
      }
    },
    // 每个节点内容的渲染
    renderContent(h, data) {
      return (
        <div>
          <el-popover placement="bottom" trigger="click">
            <div style="text-align: right; margin: 0">
              <el-button
                size="mini"
                type="primary"
                plain
                round
                onClick={(v) => this.onClickAdd(v, data)}
              >
                新增下级
              </el-button>
              <el-button
                size="mini"
                type="primary"
                plain
                round
                onClick={(v) => this.update(v, data)}
              >
                编辑
              </el-button>
              <el-button
                plain
                round
                size="mini"
                onClick={(v) => this.onerror(v, data)}
              >
                删除
              </el-button>
            </div>
            <div slot="reference">
              <div
                style="width:100%;height:100%;display:block;padding:12px 0 12px 10px;border-radius:3px;text-align:left;display:flex"
                class={
                  data.sort === 1
                    ? 'bg-tomato'
                    : data.sort === 2
                    ? 'bg-gold'
                    : 'bg-green'
                }
              >
                <div style="margin-left:10px;font-size:16px;">
                  <div style="font-weight: bold;">姓名：{data.contactName}</div>
                  <div style="">手机号:{data.phone}</div>
                  <div style="padding-top: 4px;">{data.role}</div>
                </div>
              </div>
            </div>
          </el-popover>
        </div>
      );
    },
    // 新增 节点
    onClickAdd(v, data) {
      this.$emit('onClickAdd', data);
    },
    //  编辑节点
    update(v, data) {
      this.$emit('update', data);
    },
    // 删除节点
    onerror(v, data) {
      this.$emit('onerror', data);
    },
    // relations默认为各个公司的id（可根据实际情况自行设置），
    onExpand(e, data) {
      if ('expand' in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, 'expand', true);
      }
    },
    //点击选项执行的方法，可以用于跳转到其他链接，注意一定要写协议头
    onNodeClick(e, data) {
      if (data.url == null) {
        return false;
      } else {
        window.open(data.url);
      }
    },
    collapse(list) {
      var _this = this;
      list.forEach(function (child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    // 展开
    expandChange() {
      this.toggleExpand(this.data, this.expandAll);
    },
    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          _this.$set(item, 'expand', val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, 'expand', val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    },
  },
};
</script>
<style  lang='less'>
@import './style/organ.less';

.org-boxs {
  width: 100%;
  height: 100%;
  text-align: center;
  /*background: #030C24;*/
  background-image: -webkit-radial-gradient(
    ellipse farthest-corner at center 40%,
    #000d4d 0%,
    #000105 100%
  );
  background-image: radial-gradient(
    ellipse farthest-corner at center 40%,
    #000d4d 0%,
    #000105 100%
  );
  overflow-y: scroll;
}
.org-tree-container {
  background: none !important;
}
.org-tree-node-label {
  white-space: nowrap;
}
.bg-none {
  background-color: #030c24;
  color: #fff;
}
.bg-white {
  background-color: #ecf5ff;
}
.org-tree-node-label .org-tree-node-label-inner {
  width: 13vw;
  min-width: 249px;
  padding: 0px 0px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  /* border: 1px solid @colors;*/
  overflow: hidden;
  box-sizing: border-box;
}
.bg-tomato {
  background-color: #595f71;
}
.bg-gold {
  background-color: #fd6969;
}
.bg-gray {
  background-color: #deceaa;
}
.bg-lightpink {
  background-color: lightpink;
}
.bg-blue {
  background-color: #057d9f;
}
.bg-green {
  background-color: #409eff;
}
</style>
.org-boxs {
  width: 100%;
  height: 100%;
  text-align: center;
  /*background: #030C24;*/
  background-image: -webkit-radial-gradient(
    ellipse farthest-corner at center 40%,
    #000d4d 0%,
    #000105 100%
  );
  background-image: radial-gradient(
    ellipse farthest-corner at center 40%,
    #000d4d 0%,
    #000105 100%
  );
  overflow-y: scroll;
}
.org-tree-container {
  background: none !important;
}
.org-tree-node-label {
  white-space: nowrap;
}
.bg-none {
  background-color: #030c24;
  color: #fff;
}
.bg-white {
  background-color: #ecf5ff;
}
.org-tree-node-label .org-tree-node-label-inner {
  width: 13vw;
  min-width: 249px;
  padding: 0px 0px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  /* border: 1px solid @colors;*/
  overflow: hidden;
  box-sizing: border-box;
}
.bg-tomato {
  background-color: #595f71;
}
.bg-gold {
  background-color: #fd6969;
}
.bg-gray {
  background-color: #deceaa;
}
.bg-lightpink {
  background-color: lightpink;
}
.bg-blue {
  background-color: #057d9f;
}
.bg-green {
  background-color: #409eff;
}
</style>
<style scoped>
::v-deep .horizontal .org-tree-node:before,
.horizontal .org-tree-node:after {
  width: 19px;
  height: 49.8% !important;
}
</style>